<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar</title>
    <style>
        body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #4e3135;
      }

      ul {
        display: flex;
        flex-direction: column;
        list-style-type: none;
      }
      ul li a {
        display: flex;
        padding: 6px;
        color: white;
        text-decoration: none;
        overflow: hidden;
      }
      ul li a span {
        position: relative;
        transition: 0.3s;
      }
      ul li a span::before {
        position: absolute;
        content: attr(data-text);
        transform: translateY(130%);
      }
      ul li a:hover span { 
        transform: translateY(-130%);
      }
      /* ul li a span::after {
        position: absolute;
        content: attr(data-text);
        transform: translateY(0);
      } */
    </style>
</head>
<body>
    <ul>
        <li><a href="#" data-text="Home">Home</a></li>
        <li><a href="#" data-text="nav">nav</a></li>
        <li><a href="#" data-text="table">table</a></li>
        <li><a href="#" data-text="form">form</a></li>
        <li><a href="#" data-text="js">js</a></li>
    </ul>
</body>
</html>
<script>
    let floatTextMenuLinks = document.querySelectorAll("ul li a");
    floatTextMenuLinks.forEach((link) => {
      let letters = link.textContent.split("");
      link.textContent = "";
      letters.forEach((letter, i) => {
        let span = document.createElement("span");
        span.textContent = letter;
        span.style.transitionDelay = `${i / 20}s`;
        span.dataset.text = letter;
        link.append(span);
      });
    });
  </script>